<template>
  <div style="width: 100%; height: 100%">
    <div style="width: 100%; height: 100%" id="map"></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import http from "../utils/http";
onMounted(() => {
  var TDT = new ol.layer.Tile({
    title: "天地图卫星影像",
    source: new ol.source.XYZ({
      url:
        "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=bcc62222fc634ec736589c483de933e6",
    }),
    visible: false,
  });
  const map = new ol.Map({
    target: "map",
    layers: [
      TDT,
      new ol.layer.Tile({
        title: "天地图地图",
        source: new ol.source.XYZ({
          url:
            "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=bcc62222fc634ec736589c483de933e6",
        }),
      }),
      new ol.layer.Tile({
        title: "天地图标注",
        source: new ol.source.XYZ({
          url:
            "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=bcc62222fc634ec736589c483de933e6",
        }),
      }),
    ],
    view: new ol.View({
      //长沙
      center: ol.proj.fromLonLat([112.938814, 28.228209]),
      zoom: 12,
    }),
  });
  map.addControl(new ol.control.LayerPopup());
  //获取geojson数据
  http
    .get(
      "/roads/all"
      // + localStorage.getItem("ms_name")
    )
    .then((res) => {
      var geojsonObject = res.data;
      var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
        //数据坐标系
        dataProjection: "EPSG:4326",
        //地图坐标系
        featureProjection: "EPSG:3857",
      });
      var vectorSource = new ol.source.Vector({
        features: features,
      });
      var vectorLayer = new ol.layer.Vector({
        title: "路网",
        source: vectorSource,
      });
      map.addLayer(vectorLayer);
      //fit
      var extent = vectorSource.getExtent();
      // map.getView().fit(extent, map.getSize());

      // Select  interaction
      var selecti = new ol.interaction.Select({
        hitTolerance: 5,
        condition: ol.events.condition.singleClick,
      });
      map.addInteraction(selecti);

      // Select control
      var popup = new ol.Overlay.PopupFeature({
        popupClass: "default anim",
        select: selecti,
        canFix: true,
      });
      map.addOverlay(popup);
      // Select feature when click on the reference index
      selecti.on("select", function (e) {
        var f = e.selected[0];
        if (f) {
          listCtrl.select(f);
        }
      });

      // Select control
      var listCtrl = new ol.control.FeatureList({
        title: "路网",
        // className: 'ol-bottom',
        collapsed: true,
        features: vectorSource,
        // target: document.body
      });
      listCtrl.enableSort("nom", "region");
      map.addControl(listCtrl);
      listCtrl.on("select", function (e) {
        selecti.getFeatures().clear();
        selecti.getFeatures().push(e.feature);
        //show(coordinate, features, current)
        popup.show(e.coordinate, e.feature);
      });
      listCtrl.on("dblclick", function (e) {
        map.getView().fit(e.feature.getGeometry().getExtent());
        map.getView().setZoom(map.getView().getZoom() - 1);
      });

      listCtrl.on(["resize", "collapse"], function (e) {
        console.log(e);
      });
      // Set the control grid reference
      var search = new ol.control.SearchFeature({
        //target: $(".options").get(0),
        source: vectorSource,
        property: "name",
        sort: function (f1, f2) {
          if (search.getSearchString(f1) < search.getSearchString(f2)) return -1;
          if (search.getSearchString(f1) > search.getSearchString(f2)) return 1;
          return 0;
        },
      });
      map.addControl(search);

      // selecti feature when click on the reference index
      search.on("select", function (e) {
        console.log(e);
        selecti.getFeatures().clear();
        selecti.getFeatures().push(e.search);
        listCtrl.select(e.search);
        var p = e.search.getGeometry().getFirstCoordinate();
        popup.show(p, e.search);
        map.getView().animate({ center: p });
      });
      //<input type="search" class="search" autocomplete="off" placeholder="Search...">
      //修改placeholder为请输入路线名称
      document.getElementsByClassName("search")[0].placeholder = "请输入路线名称";
    });
});
</script>
